<template>
  <div class="dashboard-container">
    <!--账号信息-->
    <div class="dashboard-text">
      <span>
        账号:<{{ this.$store.state.operator.id }}>{{ this.$store.state.operator.name }}
      </span>
      <span>
        状态:{{ this.getState }}
      </span>
    </div>
    <!--任务筛选框-->
    <el-form :inline="true" ref="form" :model="queryLike" label-width="120px">
      <el-form-item label="任务发布者id">
        <el-input v-model="queryLike.id" placeholder="输入任务发布者id" ></el-input>
      </el-form-item>
      <el-form-item label="任务名称">
        <el-input v-model="queryLike.name" placeholder="输入要查找的任务名称"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="任务介绍">
        <el-input v-model="queryLike.context" placeholder="输入要查找的任务介绍"></el-input>
      </el-form-item>
      <el-form-item label="状态码">
        <el-radio-group v-model="queryLike.state">
          <el-radio :label="1">正常工作中</el-radio>
          <el-radio :label="0">封禁</el-radio>
          <el-radio :label="3">完成</el-radio>
          <el-radio :label="2">提交中</el-radio>
          <el-radio :label="4">转发中</el-radio>
          <el-radio :label="-1">所有</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="queryLike.startTime1"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择开始时间" v-model="queryLike.startTime2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="queryLike.endTime1"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择结束时间" v-model="queryLike.endTime2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <br>
      <el-form-item label="排序类型">
        <el-radio-group v-model="queryLike.sortType">
          <el-radio :label="1">降序</el-radio>
          <el-radio :label="0">升序</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序依据">
        <el-radio-group v-model="queryLike.sortBy">
          <el-radio :label="10">创建时间</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="页数">
        <el-input v-model="queryLike.page" width="20" placeholder="输入当前页"></el-input>
      </el-form-item>
      <el-form-item label="页内条数">
        <el-input v-model="queryLike.pageSize" width="20" placeholder="输入单页总条数"></el-input>
      </el-form-item>
      <el-form-item>
        <!--查询按钮-->
        <el-button type="primary" @click="search(queryLike)" icon="el-icon-search" value="查询"></el-button>
      </el-form-item>
    </el-form>
    <!--套餐对话框-->
    <el-dialog
      title="任务历史状态"
      :visible.sync="packageDialogVisible"
      width="75%"
      center>
      <el-table :data="packageList.l" style="width: 100%" max-height="500px">
        <el-table-column fixed property="wsid" label="主键"></el-table-column>
        <el-table-column property="wid" label="任务id"></el-table-column>
        <el-table-column property="title" label="标签"></el-table-column>
        <el-table-column property="belong.id" label="转发者id"></el-table-column>
        <el-table-column property="belong.name" label="转发者名字"></el-table-column>
        <el-table-column property="to.id" label="接收者id"></el-table-column>
        <el-table-column property="to.name" label="接收者名字"></el-table-column>
        <el-table-column property="creattime" label="创建时间" width="150"></el-table-column>
        <el-table-column property="state" label="状态码"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <a>该请移步工作列表操作页面进行操作</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--任务列表-->
    <div class="block">
      <el-timeline>
        <el-timeline-item v-for="item in work" :timestamp="item.creattime" placement="top">
          <el-card>
            <h3>
              <h4 @click="packageOn(item)"><{{ item.wid }}>{{ item.name }}</h4>
              <el-button type="warning" @click="forward(item)">转 发</el-button>
              <el-button type="primary" @click="reception(item)">接 收</el-button>
              <el-button type="danger" @click="refuse(item)">拒 绝</el-button>
              <el-button type="success" @click="submit(item)">提 交</el-button>
            </h3>
            <p v-html="item.context"></p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      /**
       * @套餐
       * */
      packageList: "",
      /**
       * @套餐展示
       * */
      packageDialogVisible: false,
      /**
       * @任务列表
       * */
      work: this.$store.state.List.WorkVo,
      /**
       * @查询条件
       * */
      queryLike: {
        OperatorId: "",
        startTime1: "2000-01-01 00:00:00.000+0000",
        startTime2: "2000-01-01 00:00:00.000+0000",
        endTime1: "2099-01-01 00:00:00.000+0000",
        endTime2: "2099-01-01 00:00:00.000+0000",
        id: "",
        worker: "",
        page: 1,
        pageSize: 10,
        sortBy: 10,
        sortType: 1,
        name: "",
        context: "",
        state: -1,
      },
      /**
       * @后端controller名字
       * */
      controller: 'Work',
    };
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    /**
     * @获取当前登录用户状态
     * */
    getState() {
      if (this.$store.state.operator.state === 1) {
        return "在线"
      } else {
        return "离线"
      }
    },
    /**
     * @获取当前任务
     * */
    getWork() {
      return this.work;
    }
  },
  /**
   * @加载数据
   */
  created() {
    this.LoadMsg();
  },
  methods: {
    /**
     * @转发
     * */
    forward(val){
      //先在workstate添加新的状态,转发态
``
      //修改work的worker为转发的用户

     /* let _this = this;
      console.log(val)
      this.axios.post(this.$store.state.baseURL + 'client/' + this.controller + '/save?' + 'OperatorId=' + this.$store.state.operator.id,
        {
          wid: val.wid,
          id: val.id,
          worker: val.worker,
          name: val.name,
          context: val.context,
          l: val.l
        })
        .then(res => {
          //console.log(res.data)
          _this.search(_this.queryLike);
        })
      this.dialogFormVisible = false;*/
    },
    /**
     * @接收
     * */
    reception(val){

    },
    /**
     * @拒绝
     * */
    refuse(val){

    },
    /**
     * @提交
     * */
    submit(val){

    },
    /**
     * @套餐嵌入内容
     * */

    packageOn(val) {
      this.packageDialogVisible = true;
      this.packageList = val;
    },
    /**
     * @查询
     * */
    search(val) {
      let _this = this;
      //console.log(val);
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?'
        + 'OperatorId=' + this.$store.state.operator.id
        + '&id=' + val.id
        + '&worker=' + ((this.$store.state.operator.power===3)?'':this.$store.state.operator.id)
        + '&name=' + val.name
        + '&context=' + val.context
        + '&state=' + val.state
        + '&sortBy=' + val.sortBy
        + '&sortType=' + val.sortType
        + '&page=' + val.page
        + '&pageSize=' + val.pageSize
        + '&startTime=' + this.$helper.renderTime(val.startTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.startTime2).split(' ')[1]
        + '&endTime=' + this.$helper.renderTime(val.endTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.endTime2).split(' ')[1]
      )
        .then(res => {
          _this.$store.state.List.WorkstateVo = res.data;
          _this.LoadInfo(res.data);
          //console.log(_this.user);
        })
    },
    /**
     *
     * @导入具体列表的数据
     */
    LoadMsg() {
      let _this = this;
      if (this.$store.state.operator.power===3) {
        this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?' + 'OperatorId=' + this.$store.state.operator.id  + '&state=-1')
          .then(res => {
            _this.$store.state.List.WorkVo = res.data;
            _this.LoadInfo(res.data);
            //console.log(res.data);
          })
      } else {
        this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?' + 'OperatorId=' + this.$store.state.operator.id + '&worker=' + this.$store.state.operator.id + '&state=-1')
          .then(res => {
            _this.$store.state.List.WorkVo = res.data;
            _this.LoadInfo(res.data);
            //console.log(res.data);
          })
      }
    },
    /**
     *
     * @更新当前页面的数据(data<->this.$store.state)
     */
    LoadInfo(val) {
      this.work = val;
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

span {

  display: -moz-inline-box;
  display: inline-block;
  width: 500px;
}
</style>
